{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import docs from 'docs:@react-spectrum/statuslight';
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
import packageData from '@react-spectrum/statuslight/package.json';

```jsx import
import {StatusLight} from '@react-spectrum/statuslight';
```

---
category: Status
keywords: [status light, visual indicator]
---

# StatusLight

<PageDescription>{docs.exports.StatusLight.description}</PageDescription>

<HeaderInfo
  packageData={packageData}
  componentNames={['StatusLight']}
  sourceData={[
    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/status-light/'}
  ]}
  since="3.0.0" />

## Example

```tsx example
<StatusLight variant="positive">Ready</StatusLight>
```

## Content

A visible label can be provided by passing children. To indicate status, use the [variant](#variant) prop.

```tsx example
<StatusLight variant="positive">Semantic color</StatusLight>
<StatusLight variant="yellow">Label color</StatusLight>
```

### Accessibility
If a visible label isn't specified, an `aria-label` must be provided for accessibility. If the StatusLight is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.

In cases where the status changes at runtime, it may be appropriate to add `role="status"` so that the status change will be announced politely by assistive technology.

### Internationalization

To internationalize a StatusLight, a localized string should be set as the child content of the StatusLight.
For languages that are read right-to-left (e.g. Hebrew and Arabic), the StatusLight is automatically flipped.

## Props

<PropTable component={docs.exports.StatusLight} links={docs.links} />

## Visual options

### Variant
[View guidelines](https://spectrum.adobe.com/page/status-light/#Semantic-variants)

When status lights have a semantic meaning, they should use semantic colors.
Use the appropriate color to indicate status as follows.

```tsx example
<StatusLight variant="neutral">Gray: Archived, Deleted, Paused, Draft, Not Started, Ended</StatusLight>
<StatusLight variant="positive">Green: Approved, Complete, Success, New, Purchased, Licensed</StatusLight>
<StatusLight variant="notice">Orange: Needs Approval, Pending, Scheduled, Syncing, Indexing, Processing</StatusLight>
<StatusLight variant="negative">Red: Error, Alert, Rejected, Failed</StatusLight>
<StatusLight variant="info">Blue: Active, In Use, Live, Published</StatusLight>
```

When status lights are used to color code categories and labels commonly found in data visualization,
they use label colors. The ideal usage for these is when there are 8 or fewer categories or labels being color coded.
Use them in the following order to ensure the greatest possible color differences for multiple forms of color blindness:

```tsx example
<StatusLight variant="indigo">Indigo</StatusLight>
<StatusLight variant="celery">Celery</StatusLight>
<StatusLight variant="magenta">Magenta</StatusLight>
<StatusLight variant="yellow">Yellow</StatusLight>
<StatusLight variant="fuchsia">Fuchsia</StatusLight>
<StatusLight variant="seafoam">Seafoam</StatusLight>
<StatusLight variant="chartreuse">Chartreuse</StatusLight>
<StatusLight variant="purple">Purple</StatusLight>
```

### Disabled
[View guidelines](https://spectrum.adobe.com/page/status-light/#Disabled)

Use the `isDisabled` prop to match the state of a containing element.
Note that the `isDisabled` prop alters the visual style of the StatusLight,
but does not convey any state information to assistive technology.

```tsx example
<StatusLight variant="yellow" isDisabled >Yellow</StatusLight>
```
